我們在前兩篇文章有利用 useEffect 去 fetch 資料，但把這部分和主要元件的程式碼放在一起，會讓整體看起來很冗長，因此這篇文章會說到自定義 Hook 來解決這部分的問題

為什麼需要自定義 Hook

• 重複使用邏輯
• 分離邏輯與 UI
• 提升維護性與可讀性

自定義 Hook 的特色

• 命名規則：必須以 use 開頭（例如：useFetch）
• 邏輯封裝：把「重複的狀態管理 + 副作用邏輯」抽離成一個 Hook
• 可重複使用：一次寫好，多個元件都能使用
• 回傳值靈活：可以回傳狀態、方法，甚至一整個物件

使用方法：

useFetch.js

const useFetch () =>{
(…)
}	
Export default useFetch;

例如我們上一篇文章的這個程式碼：

import { useEffect, useState } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [blogs, setBlogs] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      fetch('http://localhost:8000/blogs')
      .then(res => {
        if (!res.ok) { 
          throw Error(''無法讀取資料來源'');
        }
        return res.json();
      })
      .then(data => {
        setIsLoading(false);
        setBlogs(data);
        setError(null);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err.message);
      })
    }, 1000);
  }, [])

  return (
    <div className="home">
      {error && <div>{ error }</div>}
      { isLoading && <div>資料載入中...</div> }
      {blogs && <BlogList blogs={blogs} />}
    </div>
  );
}
 
export default Home;

缺點：程式碼太冗長，而且如果其他元件也需要獲取資料，就需要再寫一遍

解法：抽出邏輯

useFetch.js

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [blogs, setBlogs] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      fetch(url)
      .then(res => {
        if (!res.ok) { 
          throw Error(''無法讀取資料來源'');
        }
        return res.json();
      })
      .then(data => {
        setIsLoading(false);
        setBlogs(data);
        setError(null);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err.message);
      })
    }, 1000);
  }, [url])


  return { data, isLoading, error };
}
 
export default useFetch;

因此在原本的元件裡就可以直接導入：
Home.js

import BlogList from "./BlogList";
import useFetch from "./useFetch";

const Home = () => {
  const { error, isLoading, data: blogs } = useFetch('http://localhost:8000/blogs')

  return (
    <div className="home">
      { error && <div>{ error }</div> }
      { isLoading && <div>資料載入中...</div> }
      { blogs && <BlogList blogs={blogs} /> }
    </div>
  );
}

export default Home;

為什麼抽出邏輯後，原本的http://localhost:8000/blogs要改成 url 參數？

如果不傳入 url，Hook 內部的 API 位址就會被固定，只能抓某一個 API；
但如果改成接收 url 參數，就能在呼叫 Hook 時傳入不同的 API，讓同一個 Hook 能夠重複使用

傳入url：

const blogs = useFetch("http://localhost:8000/blogs");
const users = useFetch("http://localhost:8000/users");
使用時可以用同一個 Hook 也能抓取其他 API

比較

結論

使用自定義 Hook 需要注意的地方

1. 避免過度拆分
   • 不是所有程式邏輯都需要抽成 Hook，如果只是單純一個小邏輯，硬要抽出來反而會增加複雜度
2. 參數設計要有彈性
   • 就像上述提到的「有沒有 url 參數」差異，如果設計得太死，Hook 就會失去彈性
3. 回傳值的設計
   • 一個 Hook 通常會回傳「資料 + 狀態 + 操作方法」，例如： const { data, isLoading error } = useFetch(url);